{% extends "base.html" %}
{% block content %}
{% ifequal is_con 0 %}
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<div class="form-div" style="margin:10px;">
  <form action='' method='get' name="searchForm">
	<table>
		<tr>
			<td style="border:0px;padding:3px;">
				<img src="/static/images/icon_search.gif" width="26" height="22" border="0" alt="SEARCH">
			</td>
			<td  style="border:0px;padding:3px;">
				Date Start:<input type='text' name='starttime' id='start'>
				Date End:<input type='text' name='endtime' id='end'>
				Program:<select name="p_id" id="p_id" style="color:#CC33FF" onchange='$("input#search").click()'>
							{% for p in project_list %}
								<option value="{{p.id}}" {% ifequal p.id p_id %} selected="selected" {% endifequal %}>{{p.name}}</option>
							{% endfor %}
							</select>
							<select name="period" id="period" style="color:#CC33FF" onchange='$("input#search").click()'>
								{% for p in periods %}
									<option value="{{p.0}}">{{p.0}}</option>
								{% endfor %}
							</select>
				<input type='button' id="search" value='Search'/>
			</td>
		</tr>
	</table>
  </form>
  <form action="/report_export/" method='post' id='post_report'>
	<input type='hidden' name='d' value=''/>
	<input type='hidden' name='t' value=''/>
  </form>
</div>
<script type="text/javascript" src="/static/js/create_report_export.js"></script>
<script>
$(document).ready(
	function(){
    	$('#start').datepicker({"dateFormat": "yy-mm-dd",changeMonth:true,changeYear:true})
		$('#end').datepicker({"dateFormat": "yy-mm-dd",changeMonth:true,changeYear:true})
		var agodays = new Date(Date.parse(new Date().toString()) - 86400000*6);
		var year = agodays.getUTCFullYear()
		var month = (agodays.getUTCMonth()+1)>=10?(agodays.getUTCMonth()+1):'0'+(agodays.getUTCMonth()+1)
		var day = agodays.getUTCDate()>=10?agodays.getUTCDate():'0'+agodays.getUTCDate()
		var date = year+'-'+month+'-'+day
		$('#start').val(date)

	}
)
$("input#search").bind({
	click:function(){
		var t = this
		if(t.style.cursor == 'wait'){
			return false;
		}
		t.style.cursor = 'wait'
		var data = $('form[name="searchForm"]').serializeArray()
		var datas = {'is_con':1,'t':Math.random()}
		for(var i=0;i<data.length;i++){
			datas[data[i].name] = data[i].value
		}
		$.ajax({
			url:'',
			data:datas,
			type:'get',
			dataType:'html',
			success:function(e){
				t.style.cursor = 'pointer'
				$('#conreturn').html(e)
			}
		})
	}
})
</script>
{% endifequal %}
<style>
td{
	padding:2px;
	border:1px dotted #333;
}
th{
	background:#ffffcd;
	border:1px dotted #333;
	padding:2px;
}
.selectdate{
	width:auto;float:left;padding:3px;background:#fff;border:1px dotted #333;margin:2px;cursor:pointer;
}
.selectdate:hover{
	background:#defdef;
}
.gray{
	color:gray;
}
</style>
<div id="conreturn" style="margin:10px;">
	{%if error_info%}
		<span class='red'>{{error_info}}</span>
	{%else%}
	<table width='90%'>
		<tr>
			<td colspan="200"  style="border:1px solid #333;">
				<table width='100%'>
				  <tr>
					<td colspan='2' align='left' style="line-height:25px;background:#ffffcd;border:0px;padding:3px;"></td>
					<td align='right' colspan='5' align='right' style="line-height:25px;background:#ffffcd;border:0px;padding:3px;">
						<strong><span id='university'></span></strong><br>
						<strong><span id='program'></span></strong>
					</td>
				  </tr>
				  <tr>
					<td colspan='2' align='left' style="line-height:25px;background:#ffffcd;border:0px;padding:3px;font-size:20px;"><strong id='report_title'>Attendance List</strong></td>
					<td colspan='5' align='right' style="line-height:25px;background:#ffffcd;border:0px;padding:3px;"><strong>Date:</strong>&nbsp;
					<span id="report_start">{{begin|date:"M d,Y"}}</span> - {{end|date:"M d,Y"}}</td>
				  </tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table width='100%'>
				  <tr>
					<td align='left' width="300" style="border:0px;" colspan='2'>Module: {{module}}</td>
					<td align='left' style="border:0px;" colspan='5'>Professor: {{professor}}</td>
				  </tr>
				  <tr>
					<td align='left' width="300" style="border:0px;" colspan='2'>Venue: {{venue}}</td>
					<td align='left' style="border:0px;" colspan='5'>TA:</td>
				  </tr>
				  <tr>
					<td align='center' colspan='7' style="border:0px;line-height:30px;">**  If your name is not on this list, you will not receive credit for the course  **</td>
				  </tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
			<table width='100%'>
				<tr>
					<th style="background:#def;border:0px;">&nbsp;</th>
					<th style="background:#def;">&nbsp;</th>
					<th style="background:#def;">Day 1</th>
					<th style="background:#def;">Day 2</th>
					<th style="background:#def;">Day 3</th>
					<th style="background:#def;">Day 4</th>
					<th style="background:#def;">Remarks</th>
				</tr>
				<tr>
					<th rowspan='2' valign="center">Student Name</th>
					<th align='center' style="border:0px;">Session</th>
					<th align='center' style="border:0px;">{{date1|date:"M d,Y"}}</th>
					<th align='center' style="border:0px;">{{date2|date:"M d,Y"}}</th>
					<th align='center' style="border:0px;">{{date3|date:"M d,Y"}}</th>
					<th align='center' style="border:0px;">{{date4|date:"M d,Y"}}</th>
					<th align='center' style="border:0px;"></th>
				</tr>
				<tr>
					<th>Time</th>
					<th><span class='gray'>2 pm - 8 pm</span></th>
					<th><span class='gray'>9 am - 6 pm</span></th>
					<th><span class='gray'>2 pm - 8 pm</span></th>
					<th><span class='gray'>9 am - 6 pm</span></th>
					<th></th>
				</tr>
				{%if s_list%}
				{%for s in s_list%}
				<tr>
					<td>{{s}}</td>
					<td>1st session</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr  style="border-bottom:1px solid #333;">
					<td></td>
					<td>2st session</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				{%endfor%}
				{%else%}
				<tr>
					<td colspan='10'><span style="color:green;font-size:16px;line-height:30px;">No Result!</span></td>
				</tr>
				{%endif%}
			</table>
			</td>
		</tr>
	</table>
	{%endif%}
</div>
<script>
var period = ''
{%if periods%}
	$('#period').show()
	{% for p in periods %}
		period += '<option value="{{p.0}}" {%ifequal p.0 period%}selected{%endifequal%}>{{p.0}}</option>'
	{% endfor %}
{%else%}
	$('#period').hide()
{%endif%}
$('#period').html(period);
var pro = parseInt($('#p_id').val())
$('#university').text(school[pro][0])
$('#program').text(school[pro][1])
</script>
{% endblock %}
